02. A Quick Flexbox Example

A Quick Flexbox Example Heading

A Quick Flexbox Example

ND001 C01 L03 02 Introducing Flexbox Example

Introducing Flexbox Example Summary

By setting an element's display property to flex, all elements inside of it become flex items that can be laid out in a customized way following design patterns like columns, rows, alignment, and distribution.

Introducing Flexbox Quiz

What do you add to your code to begin using flexbox properties?
SOLUTION: By setting the `display` property of the parent element to `flex`.

Workspace

This section contains either a workspace (it can be a Jupyter Notebook workspace or an online code editor work space, etc.) and it cannot be automatically downloaded to be generated here. Please access the classroom with your account and manually download the workspace to your local machine. Note that for some courses, Udacity upload the workspace files onto https://github.com/udacity, so you may be able to download them there.

Workspace Information:

  • Default file path:
  • Workspace type: html-live
  • Opened files (when workspace is loaded): n/a

Introducing Flexbox Summary

Here, we have learned that Flexbox (the Flexible Box Module) is a set of CSS rules for stretching multiple columns or rows across a parent container. Flex is unique amongst CSS properties because you have a main container and the items nested within it. CSS flex has properties that apply to both the element itself, and the items inside of it.

To use flexbox set the display property of the parent container to flex:

.container{
  display:flex;
}

Introducing Flexbox Further Research

Further research

For more information about a Flexbox overview, see this MDN entry.

Next Concept